<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <!-- 引入Vue -->
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">

</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户添加</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-form ref="userForm" :model="userForm" :rules="rules" label-width="20%" >
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="账号名" prop="user_email">
                            <el-input v-model="userForm.user_email"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="密码" prop="user_password">
                            <el-input type="password" v-model="userForm.user_password" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="确认密码" prop="checkPass">
                            <el-input type="password" v-model="userForm.checkPass" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="用户名" prop="user_name">
                            <el-input v-model="userForm.user_name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="部门" prop="user_dept">
                            <el-input v-model="userForm.user_dept"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="手机号" prop="user_phone">
                            <el-input v-model="userForm.user_phone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


            <#--<#if userType == "99">-->
                <#--<el-row>-->
                    <#--<el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">-->
                        <#--<el-form-item label="公司名称" prop="company_id">-->
                            <#--<el-select v-model="userForm.company_id" clearable filterable placeholder="请选择公司" style="width: 100%" @change="pickCompanyName" @clear="clearCompanyName">-->
                                <#--<el-option v-for="item in options" :key="item.id" :disabled="item.id == '1'" :label="item.company_name"-->
                                           <#--:value="item.id">-->
                                <#--</el-option>-->
                            <#--</el-select>-->
                        <#--</el-form-item>-->
                    <#--</el-col>-->
                <#--</el-row>-->
            <#--</#if>-->

                <el-form-item>
                    <el-button type="primary" @click="submitForm('userForm')">立即创建</el-button>
                    <a onclick="javascript:history.back(-1);">
                        <el-button>返回</el-button>
                    </a>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</div>

</body>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script>
    // layui.use(['layer'], function () {
    //     layer = layui.layer;
        new Vue({
            el: '#app',
            data() {
                //密码验证
                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入密码'));
                    } else {
                        if (this.userForm.checkPass !== '') {
                            this.$refs.userForm.validateField('checkPass');
                        }
                        callback();
                    }
                };
                var validatePass2 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.userForm.user_password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                //手机格式验证
                var checkPhone = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('手机号不能为空'));
                    } else {
                        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                        console.log(reg.test(value));
                        if (reg.test(value)) {
                            callback();
                        } else {
                            return callback(new Error('请输入正确的手机号'));
                        }
                    }
                };
                return {
                    //表单内容
                    userForm: {
                        user_email: '',
                        user_password: '',
                        checkPass: '',
                        user_name: '',
                        user_phone: '',
                        content: '',
                        company_id: ''
                    },
                    options: [],
                    //表单字段验证项
                    rules: {
                        user_email: [{
                            required: true,
                            message: '请填写账号名',
                            trigger: 'blur'
                        }],
                        user_password: [{
                            validator: validatePass,
                            trigger: 'blur'
                        }],
                        checkPass: [{
                            validator: validatePass2,
                            trigger: 'blur'
                        }],
                        user_name: [{
                            required: true,
                            message: '请填写姓名',
                            trigger: 'blur'
                        }],
                        user_dept: [{
                            required: true,
                            message: '请填写部门',
                            trigger: 'blur'
                        }],
                        user_phone: [{
                            validator: checkPhone,
                            trigger: 'blur'
                        }],
                        group_number: [{
                            required: true,
                            message: '请选择活动区域',
                            trigger: 'change'
                        }],
                    },
                }
            },
            methods: {
                // clearCompanyName(){
                //     this.userForm.user_name='';
                // },
                // pickCompanyName(vId){
                //     let obj = {};
                //     obj = this.options.find((item)=>{
                //         return item.id === vId;//筛选出匹配数据
                //     });
                //     this.userForm.user_name = obj.company_name;
                // },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },
                async submitForm(formName) {
                    var tempForm = this.userForm;
                    var bool = false;
                    var err = "系统异常，用户信息添加失败，请重试.";
                    this.$refs[formName].validate(async function (valid) {
                        if (valid) {
                            try {
                                $.ajax({
                                    url: '/user/add.json',
                                    type: 'post',
                                    data: tempForm,
                                    async: false,
                                    dataType: 'json',
                                    success: function (result) {
                                        if (result.ret) {
                                            bool = true;
                                        }else{
                                            err = result.msg;
                                        }
                                    }
                                });
                            } catch {

                            }
                        } else {
                            return false;
                        }
                    });
                    if (bool) {
                        this.$confirm('用户添加成功，是否返回列表页?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'success'
                        }).then(() => {
                            window.history.back(-1);
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消'
                            });
                        });
                    } else {
                        this.$message({
                            message: err,
                            type: 'error'
                        });
                    }
                },
                //初始化得的企业列表
                // ajaxFunction() {
                //     var msg = "";
                //     var bool = false;
                //     var resultData = '';
                //     $.ajax({
                //         url: '/company/select.json',
                //         type: 'post',
                //         async: false,
                //         dataType: 'json',
                //         success: function (result) {
                //             console.log(result.data)
                //             if (result.ret) {
                //                 bool = true;
                //                 resultData = result.data;
                //             } else {
                //                 msg = result.msg;
                //             }
                //         }
                //     });
                //     if (bool) {
                //         this.options = resultData;
                //
                //     } else {
                //         this.$message({
                //             message: '系统异常，企业列表获取异常，请重试.',
                //             type: 'error'
                //         });
                //     }
                // },
            },
            async mounted() {
            <#--<#if userType == "99">-->
                <#--this.ajaxFunction();-->
            <#--</#if>-->
            }
        });
    // });
</script>

</html>